<!-- 商品编辑页面 -->
<template>
  <div class="supplierMessage">
    <el-card class="searchCard" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>商品编辑</span>
      </div>
      <!-- 信息编辑表单 -->
      <el-form ref="searchForm" class="searchForm" :model="searchForm" label-width="150px" :inline="false" size="normal">
        <!-- 商品名称编辑 -->
        <el-form-item label="商品名称:">
          <el-input v-model="searchForm.conpanyName" style="width:400px" placeholder="商品名称" size="small" clearable />
        </el-form-item>
        <!-- 商品类型选择 -->
        <el-form-item label="商品类型:">
          <el-select v-model="searchForm.goodsType" size="small" placeholder="商品类型" @change="goodsTypeSelect">
            <el-option label="实物" value="1" />
            <el-option label="服务" value="2" />
          </el-select>
        </el-form-item>
        <!-- 商品分类 -->
        <el-form-item label="商品分类:">
          <el-select v-model="searchForm.region" size="small" placeholder="商品分类">
            <el-option label="实验室" value="1" />
            <el-option label="机构" value="2" />
            <el-option label="商户" value="3" />
            <el-option label="全部" value="4" />
          </el-select>
        </el-form-item>
        <!-- 规格选择 -->
        <el-form-item label="规格:">
          <el-button :disabled="selectService" :type="bulkBtn" size="mini" @click="bulk">散装</el-button>
          <el-button :disabled="selectService" :type="packBtn" size="mini" @click="pack">整装</el-button>
        </el-form-item>
        <!-- 选择散装规格显示 -->
        <!-- 规格单位选择 -->
        <div v-show="isBulk">
          <el-form-item style="margin-top:-25px">
            <el-input :disabled="selectService" style="width:200px" placeholder="对应规格数值" size="mini" clearable />
            <el-select v-model="searchForm.region" :disabled="selectService" style="width:100px;margin-left:20px" size="mini">
              <el-option label="ml" value="1" />
              <el-option label="g" value="2" />
              <el-option label="kg" value="3" />
              <el-option label="l" value="4" />
              <el-option label="m" value="5" />
              <el-option label="cm" value="6" />
            </el-select>
            <span style="margin:0 20px;font-size:20px;">/</span>
            <el-select v-model="searchForm.dregion" :disabled="selectService" style="width:100px" size="mini" placeholder="商品分类" @change="selectUnit">
              <el-option label="袋" value="1" />
              <el-option label="包" value="2" />
              <el-option label="瓶" value="3" />
              <el-option label="个" value="4" />
              <el-option label="件" value="5" />
              <el-option label="卷" value="6" />
              <el-option label="台" value="7" />
              <el-option label="盒" value="8" />
            </el-select>
          </el-form-item>
          <!-- 每份销售价 -->
          <el-form-item label="每份销售价:">
            <el-input v-model="searchForm.connectPerson" style="width:200px" placeholder="每份销售价" size="small" clearable /> <span style="margin-left:20px;">元</span><span style="font-size:20px;20px;margin:0 5px;">/</span><span>{{ unit }}</span>
          </el-form-item>
          <!-- 设置库存预警 -->
          <el-form-item label="设置库存预警:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="设置库存预警" size="small" clearable /><span style="margin-left:20px;">{{ unit }}</span>
          </el-form-item>
          <!-- 有效期 -->
          <el-form-item label="有效期:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="有效期" size="small" clearable /><span style="margin-left:20px;">天</span>
          </el-form-item>
          <!-- 指定供应方 -->
          <el-form-item label="指定供应方:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="指定供应方" size="small" clearable />
          </el-form-item>
          <!-- 是否关联十蜂健康 -->
          <el-form-item label="是否关联十蜂健康:">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#DCDFE6"
            />
          </el-form-item>
          <!-- 是否关联十蜂商品 -->
          <el-form-item v-show="value" label="关联十蜂商品编号:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="关联十蜂商品编号" size="small" clearable />
          </el-form-item>
        </div>
        <!-- 选择整装规格选择 -->
        <div v-show="isPack">
          <el-form-item style="margin-top:-25px">
            <!-- 整装单品容量选择 -->
            <el-input style="width:200px" placeholder="对应规格数值" size="mini" clearable />
            <!-- 整装单品容量单位选择 -->
            <el-select v-model="searchForm.region" style="width:100px;margin-left:20px" size="mini">
              <el-option label="ml" value="1" />
              <el-option label="g" value="2" />
              <el-option label="kg" value="3" />
              <el-option label="l" value="4" />
              <el-option label="m" value="5" />
              <el-option label="cm" value="6" />
            </el-select>
            <span style="margin:0 20px;font-size:20px;">/</span>
            <!-- 整装单品单位选择 -->
            <el-select v-model="searchForm.dregion" style="width:100px" size="mini" placeholder="商品分类" @change="selectUnit">
              <el-option label="袋" value="1" />
              <el-option label="包" value="2" />
              <el-option label="瓶" value="3" />
              <el-option label="个" value="4" />
              <el-option label="件" value="5" />
              <el-option label="卷" value="6" />
              <el-option label="台" value="7" />
              <el-option label="盒" value="8" />
            </el-select>
            <span style="margin:0 20px">✖</span>
            <!-- 整装单品数量 -->
            <el-input style="width:200px" placeholder="对应规格数值" size="mini" clearable />
            <span style="margin-left:5px">{{ unit }}</span><span style="font-size:20px;margin:0 20px;">/</span>
            <!-- 整装单位选择 -->
            <el-select v-model="searchForm.packDregion" style="width:100px" size="mini" placeholder="商品分类" @change="selectPackUnit">
              <el-option label="箱" value="1" />
              <el-option label="包" value="2" />
              <el-option label="件" value="3" />
              <el-option label="吨" value="4" />
            </el-select>
          </el-form-item>
          <!-- 整装每份销售价 -->
          <el-form-item label="每份销售价:">
            <el-input v-model="searchForm.connectPerson" style="width:200px" placeholder="每份销售价" size="small" clearable /> <span style="margin-left:20px;">元</span><span style="font-size:20px;margin:0 5px;">/</span><span>{{ unit }}</span>
          </el-form-item>
          <!-- 整装销售价 -->
          <el-form-item label="整装销售价:">
            <el-input v-model="searchForm.connectPerson" style="width:200px" placeholder="整装销售价" size="small" clearable /> <span style="margin-left:20px;">元</span><span style="font-size:20px;margin:0 5px;">/</span><span>{{ packUnit }}</span>
          </el-form-item>
          <!-- 设置库存预警 -->
          <el-form-item label="设置库存预警:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="设置库存预警" size="small" clearable /><span style="margin-left:20px;">{{ unit }}</span>
          </el-form-item>
          <!-- 有效期 -->
          <el-form-item label="有效期:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="有效期" size="small" clearable /><span style="margin-left:20px;">天</span>
          </el-form-item>
          <!-- 指定供应方 -->
          <el-form-item label="指定供应方:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="指定供应方" size="small" clearable />
          </el-form-item>
          <!-- 是否关联十蜂健康 -->
          <el-form-item label="是否关联十蜂健康:">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#DCDFE6"
            />
          </el-form-item>
          <!-- 是否关联十蜂商品 -->
          <el-form-item v-show="value" label="关联十蜂商品编号:">
            <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="关联十蜂商品编号" size="small" clearable />
          </el-form-item>
        </div>
        <!-- 按钮部分 -->
        <el-form-item>
          <el-button type="primary" size="medium">提交</el-button>
          <el-button type="default" size="medium">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用，
  components: {},
  data() {
    // 这里存放数据
    return {
      selectService: false, // 商品类型为服务时状态
      isBulk: true,
      isPack: false,
      bulkBtn: 'primary', // 散装按钮
      packBtn: 'default', // 整装按钮
      value: false,
      unit: '袋', // 散装单位
      packUnit: '箱', // 整装单位
      searchForm: {
        goodsType: '1', // 商品类型
        conpanyName: '', // 供应商名字
        dregion: '4', // 供应方类型
        connectPerson: '', // 联系人姓名
        connectPhone: '', // 联系电话
        packDregion: '1'// 整箱默认单位
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    goodsTypeSelect() { // 商品类型选择
      if (this.searchForm.goodsType === '2') {
        this.selectService = true
        this.unit = '份'
      } else {
        this.selectService = false
      }
    },
    selectPackUnit() { // 选择整装单位
      if (this.searchForm.packDregion === '1') {
        this.packUnit = '箱'
      } else if (this.searchForm.packDregion === '2') {
        this.packUnit = '包'
      } else if (this.searchForm.packDregion === '3') {
        this.packUnit = '件'
      } else {
        this.packUnit = '吨'
      }
    },
    selectUnit() { // 选择散装单位
      if (this.searchForm.dregion === '1') {
        this.unit = '袋'
      } else if (this.searchForm.dregion === '2') {
        this.unit = '包'
      } else if (this.searchForm.dregion === '3') {
        this.unit = '瓶'
      } else if (this.searchForm.dregion === '4') {
        this.unit = '个'
      } else if (this.searchForm.dregion === '5') {
        this.unit = '件'
      } else if (this.searchForm.dregion === '6') {
        this.unit = '卷'
      } else if (this.searchForm.dregion === '7') {
        this.unit = '台'
      } else {
        this.unit = '盒'
      }
    },
    bulk() { // 选择散装
      this.bulkBtn = 'primary'
      this.packBtn = 'default'
      this.isBulk = true
      this.isPack = false
    },
    pack() { // 选择整装
      this.packBtn = 'primary'
      this.bulkBtn = 'default'
      this.isBulk = false
      this.isPack = true
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  lang="scss">
.supplierMessage{
   width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f2f5;
    .searchCard{
      margin: 30px;

    }
    .contactSF{
      display: flex;
         width:20%;
        align-items: center;
        // justify-content: center;
    }
}
</style>
